/*
 * @Author: jiayu
 * @Date: 2022-08-05 16:39:32
 * @LastEditors: jiayu
 * @LastEditTime: 2022-09-27 16:54:08
 * @Description:
 */
// @es-ignore
import FullCalendar from '@fullcalendar/react'; // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
import zhLocale from '@fullcalendar/core/locales/zh-cn';
import styles from './index.less'
import Card from '@/components/Card';
import { instance } from '@/services/jy-api/api';
import { useEffect, useState } from 'react';
import moment from 'moment';
import { useOrganizationalStore } from '';

const Index = () => {
  const { currentDepartmentId } = useModel('organizational')
  const [data, setData] = useState<any[]>([])

  const getData = (start_time: any, end_time: any) => {
    instance('/index/Screen/examGrid', {
      params: {
        start_time,
        end_time
      }
    }).then((data) => {
      const curriculum = data.data.curriculum.filter((item: { list: string | any[]; }) => item.list.length > 0).reduce((prev: any, current: { list: any[]; }) => {
        const list = current.list.map(item => {
          return {
            title: item.title,
            date: item.create_time,
            color: '#09B66D'
          }
        })
        return [
          ...prev,
          ...list
        ]
      }, [])
      const examination = data.data.examination.filter((item: { list: string | any[]; }) => item.list.length > 0).reduce((prev: any, current: { list: any[]; }) => {
        const list = current.list.map(item => {
          console.log(item)
          return {
            title: item.title,
            date: item.start_time,
            end: item.end_time,
            color: '#FF3D57',
            className: 'red'
          }
        })
        return [
          ...prev,
          ...list
        ]
      }, [])
      console.log([...curriculum, ...examination])
      setData([...curriculum, ...examination])
    })
  }

  const dateChange = (e) => {
    const start_time = moment(e.startStr).format('YYYY-MM-DD')
    const end_time = moment(e.endStr).format('YYYY-MM-DD')
    getData(start_time, end_time)
  }

  return (
    <div className={styles.calendar}>
      <Card
        TitleRnder='时间网格'
        RightContentRender={undefined}
      >
        <FullCalendar
          plugins={[dayGridPlugin]}
          height={550}
          aspectRatio={13}
          dayMaxEventRows={3}
          initialView="dayGridMonth"
          locale={zhLocale}
          themeSystem='darkly'
          events={data}
          datesSet={dateChange}
          customButtons={
            {
              prevMap: {
                text: '上月',
                click: function (e) {
                  console.log(e)
                }
              },
              nextMonthCustom: {
                text: '下月',
                click: function (e) {
                  console.log(e)
                }
              },
              todayCustom: {
                text: '今天',
                click: function (e) {
                  console.log(e)
                }
              }
            }
          }
        // events='https://fullcalendar.io/api/demo-feeds/events.json'
        />
      </Card>
    </div>
  );
};

export default Index;



// [
//   { title: '创建培训课“防火防盗安全演练”', date: '2022-08-01', color: '#09B66D' },
//   { title: '安排考试“防火防盗安全演练”', date: '2022-08-02', color: '#FF3D57', className: 'red' },
//   { title: '安排考试“防火防盗安全演练1”', date: '2022-08-04', end: '2022-08-07', color: '#FF3D57', className: 'red' },
//   { title: '安排考试“防火防盗安全演练2”', date: '2022-08-10', end: '2022-08-12', color: '#FF3D57', className: 'red' },
//   { title: '创建培训课“防火防盗安全演练2”', date: '2022-08-14', color: '#09B66D', },
//   { title: 'event 2', date: '2022-08-02' },
//   { title: 'event 2', date: '2022-08-02' },
//   { title: 'event 2', date: '2022-08-02' },
//   { title: 'event 2', date: '2022-08-02' },
//   { title: 'event 2', date: '2022-08-02' },
//   { title: 'event 2', date: '2022-08-02' },
// ]


interface FormData {
  name: string,
  aliasName?: string,
}

interface Props {
  x: FormData
}